<template>
  <el-card class="card">
    <el-alert
            title="提示"
            type="success"
            description="系统默认标签不可修改"
            show-icon
            :closable="false"
    />
        <el-table
                :data="statusList"
                :cell-style="{textAlign: 'center'}"
                :header-cell-style="{textAlign: 'center'}"
                style="width: 100%;margin-top: 20px"
                border stripe
        >
          <el-table-column prop="id" label="状态码" width="130"/>
          <el-table-column label="示例标签" width="130">
            <template v-slot="scope">
              <el-tag size="default" v-if="scope.row.id === 1" type="success" effect="dark">正常</el-tag>
              <el-tag size="default" v-else-if="scope.row.id === 2" type="warning" effect="dark">损坏</el-tag>
              <el-tag size="default" v-else-if="scope.row.id === 3" type="danger" effect="dark">报废</el-tag>
              <el-tag size="default" v-else-if="scope.row.id === 4" effect="dark">调拨</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="状态名称" width="180"/>
          <el-table-column prop="remark" label="标记" width="180"/>
          <el-table-column prop="des" label="状态描述"/>
        </el-table>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import request from "@/util/request";

const statusList = ref([]);

const initStatusList = async () => {
  const res = await request.get("status/list");
  if (res.data.code === 200) {
    statusList.value = res.data.statusList;
  }
}
initStatusList();
</script>

<style lang="scss" scoped>
.card {
  border: none;
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.cell-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep th.el-table__cell {
  word-break: break-word;
  background-color: #f8f8f9 !important;
  color: #515a6e;
  height: 40px;
  font-size: 15px;
}
</style>